<template>
  <div style="color: #333333;">
    <!--头部logo-->
    <title1></title1>

    <!--头部面包屑-->
    <div class="breadCrumbBox flexCenter">
      <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item href="javascript:void(0)" v-if="homeFlag"><router-link :to="home">首页</router-link></a-breadcrumb-item>
          <a-breadcrumb-item href="">教育培训</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>

    <!--列表搜索框-->
    <div class="searchInputBox flexCenter">
      <div style="width: 1200px">
        <a-input-search placeholder="请输入标题名称" enter-button/>
      </div>
    </div>


    <!--列表-->
    <div style="width: 100%;" class="flexCenter">
      <div class="listBox">
        <div class="flexBetween" v-for="(item,index) in sourceData" :key="index" style="padding: 20px 0;border-bottom: 1px solid #F3F3F3">
          <div class="titleBox">
            <span class="bg" style="width: 7px;height: 7px;border: 1px solid #348bda;display: inline-block;border-radius: 100%;margin-right: 10px;"></span>
            <span class="changeColorClass" style="font-size: 16px;color: #484848;" @click="showDetail(index+1,item.title)">{{item.title}}</span>
          </div>
          <div>
            <span style="font-size: 16px;color: #484848;">{{item.time}}</span>
          </div>
        </div>
      </div>
    </div>

    <!--分页-->
    <div style="width: 100%;margin-bottom: 140px;" class="flexCenter">
      <div class="paginationBox flexAlignCenter flexBetween">
        <span>共2条数据</span>
        <a-pagination :current="current" :total="2" @change="onChange" />
      </div>
    </div>
<div style="position:fixed;bottom:0;width: 100%;">
    <supportCompany></supportCompany>
</div>
  </div>
</template>

<script>
import title1 from "@/views/title/index.vue"
import supportCompany from "@/views/supportCompany/index.vue"

export default {
  components:{
    title1,
    supportCompany
  },
  mounted(){
    window.scrollTo(0,0)
  },
  data () {
    return {
      home: '/gateway',
      current: 1,
      homeFlag: sessionStorage.getItem('homeFlag'),
      sourceData: [
        { title: "进场安全基本要求", time: "2020-08-28" },
        { title: "重要法律法规条文摘录", time: "2020-07-13" }
      ]
    }
  },
  methods: {
    onChange(current) {
      this.current = current;
    },
    showDetail(flag,content) {
      this.$router.push({path: '/educationAndTraining/detail',query:{flag:flag,content:content}})
    }
  }
}
</script>

<style scoped>
  div, p, span{
    font-family: 'Microsoft YaHei','San-serif','Microsoft JhengHei','STXihei';
  }
  .breadCrumbBox{
    width: 100%;
    height: 40px;
    background-color: rgba(246, 248, 249, 1);
    position: fixed;
    top: 100px;
    z-index: 100;
  }
  ::v-deep .ant-breadcrumb > span:last-child a {
    color: rgba(20, 146, 255, 1);
  }
  ::v-deep .ant-input{
    border-radius: 0;
  }
  .listBox{
    margin-top: 27px;
    width: 1200px;
  }
  .searchInputBox{
    width: 100%;
    margin-top: 30px;
  }
  .paginationBox{
    width: 1200px;
    height: 48px;
    background-color: rgba(246, 246, 246, 1);
    /*margin-left: 310px;*/
    padding: 0 20px 0 28px;
  }
  .titleBox:hover{
    color: #348bda;
    cursor: pointer;
  }
  .titleBox:hover .bg{
    background-color: #348bda;
  }
  .changeColorClass:hover{
    color: #348bda !important;
  }
</style>
